<template>
  <div class="my-blog">
    <div class="edit-info">
      <Form ref="editDom" :model="editData" :label-width="80" :rules="editDataRules">
        <Row>
          <Col span="16">
            <FormItem label="标题" prop="title">
              <Input v-model="editData.title" placeholder="请输入标题" :clearable="true"></Input>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="分类" prop="tag_id" v-if="tagList.length>0">
              <Select v-model="editData.tag_id">
                <Option
                  v-for="item in tagList"
                  :key="'tags'+item.tag_id"
                  :value="item.tag_id"
                >
                  {{item.tagname}}
                </Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="简介">
              <Input type="textarea" v-model="editData.brief" placeholder="请输入简介"></Input>
            </FormItem>
          </Col>
        </Row>
      </Form>
    </div>
    <div class="edit_container">
      <quill-editor
        ref="myQuillEditor"
        v-model="editData.content"
      >
      </quill-editor>
    </div>
    <Button type="primary" icon="md-save" @click="save">保存</Button>
  </div>
</template>
<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.snow.css";
import { getTags, addBlog, getBlogById, updateBlog } from '@/api/server.js';
export default {
  components: {
    quillEditor,
  },
	created(){
		
	},
  mounted() {
    let id = this.$route.query.id;
    getTags().then(res => {
      this.tagList = res.data;
      if(this.tagList.length > 0) {
        this.editData.tag_id = this.tagList[0].tag_id;
      }
      if(id) {
        getBlogById({'id':id}).then(res => {
          this.editData = res.data;
        })
      }
    })
  },
  data() {
    return {
      tagList: [],
      editData: {
        title:'',
        tag_id:null,
        brief:'',
        content:'',
        image:''
      },
      editDataRules: {
        title: [
          { required: true, message: '标题不能为空', trigger: 'blur' },
        ],
        tag_id: [
          { required: true, message: '分类不能为空', trigger: 'change' },
        ],
      },
    };
  },
	methods:{
    save() {
      console.log(1111,this.editData);
      this.$refs.editDom.validate(valid => {
        if( !this.editData.content ) {
          $Message.error('请输入内容');
          return;
        }
        if(valid) {
          if(this.$route.query.id) {
            updateBlog(this.editData).then(res => {
              if(res.data) {
                $Message.success('保存成功');
              }else {
                $Message.error('保存失败');
              }
            })
          }else {
            addBlog(this.editData).then(res => {
              if(res.data) {
                $Message.success('保存成功');
                this.$router.push({
                  path: "/my-blog",
                });
              }else {
                $Message.error('保存失败');
              }
            })
          }
          
        }else {
          $Message.error('请输入合法参数');
        }
        
      })
    },
	},
};
</script>

<style lang="less" scoped>
.my-blog {
  .edit_container {
    margin-bottom: 16px;
    /deep/ .quill-editor {
      
      padding: 0;
      .ql-container {
        height: 55vh;
        overflow: scroll;
        .ql-tooltip {
          z-index: 1;
          left: 0 !important;
          top: 0 !important;
        }
      }
      
    }
  }
  
}
</style>